import React from "react"
import {replaceNameByStr} from "../common/utils"
import {toAjax} from "../common/toAjax";
const requestUrl = {
    getLotteryRecord:"/welfare/getLotteryRecord"
}
export default class  ScrollPlay extends React.PureComponent {

    state={
        space:10,
        lotteryList:[]
    }

    componentDidMount() {
        this.getLotteryRecord();
    }

    getLotteryRecord(){
        toAjax.post(requestUrl.getLotteryRecord).then(res=>{
            if(res.code == 1){
                this.setState({
                    lotteryList:res.records
                },()=>{
                    this.startPlay()
                })
            }else{
                this.setState({
                    lotteryList:[]
                })
            }
        })
    }

    startPlay(){
        let childrenLength = $(".scroll-width").children();
        let childrenWidth = 0;
        if(childrenLength.length > 0){
            $(".scroll-width > span").each(function () {
                childrenWidth+=$(this).outerWidth()
            })
            $(".scroll-width").css("width",childrenWidth*1.5+"px");
            this.timer = setInterval(()=>{
                if(this.state.space >= childrenWidth){
                    this.state.space = 0
                }else{
                    this.state.space+=10;
                }
                $(".scroll-width").animate({marginLeft:`-${this.state.space}`},200,"linear")
            },200)
        }
    }

    componentWillUnmount(){
        clearInterval(this.timer)
    }

    render() {
        let list = this.state.lotteryList;
        return (
            <div className="scroll-box">
                <i className="iconfont icon-laba" style={{color:"#f10180",fontSize:"0.24rem"}}/>
                <div className="scroll-content">
                    <div className="scroll-width">
                        {
                            list.length > 0 ?
                                list.map((item,index)=>{
                                    return <span key={index}>恭喜试客<span>{replaceNameByStr(item.user_name,1,3,"*")}</span>{item.product_name}</span>
                                })
                            :null
                        }
                    </div>
                </div>
            </div>
        )

    }
}

